<template>
  <span class="span_item">
    <span @click="Expanded">
      <el-input v-if="node.status == 1" style="width: 100px;" v-model="node.label" size="small"></el-input>
      <el-icon v-if="node.status == 0" type="asterisk"></el-icon>
      <el-icon v-if="node.status == -1" type="ios-keypad-outline"></el-icon>
      <span v-if="node.status != 1">{{node.label}}</span>
    </span>
    <span v-if="node.status == 1">
      <el-button style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled"
              @click="SaveEdit">确认</el-button>
      <el-button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled"
              @click="CancelEdit">取消</el-button>
    </span>
    <span class="span_icon">
       <el-icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16"
             @click.native="OpenEdit"></el-icon>
       <el-icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16"
             @click.native="Append"></el-icon>
       <el-icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" type="ios-trash" color="red"
             size="18" @click.native="Delete"></el-icon>
    </span>
  </span>
</template>

<script>
    /* eslint-disable no-unused-vars */

    export default {
        data() {
            return {
                node: this.value,
                nodeData: JSON.parse(JSON.stringify(this.value))
            }
        },
        props: {
            value: {
                default: function () {
                    return {}
                }
            },
            treeNode: {
                default: function () {
                    return {}
                }
            }
        },
        methods: {
            OpenEdit() {
                this.node.status = 1
                this.node.isAdd = false
            },
            Append() {
                //添加节点事件
                this.$emit('Append')
            },
            SaveEdit() {
                //保存节点事件
                this.$emit('SaveEdit', this.nodeData)
            },
            CancelEdit() {
                this.node.status = 0
                this.$emit('CancelEdit', this.nodeData)
            },
            Delete() {
                this.$emit('Delete', this.nodeData)
            },
            Expanded() {
                this.treeNode.expanded = this.treeNode.expanded ? false : true
            }
        },
        watch: {
            value: {
                handler: function (val, oldVal) {
                    this.node = val
                },
                deep: true
            },
            node: {
                handler: function (val) {
                    this.$emit('input', val)
                },
                deep: true
            }
        }
    }
</script>
<style>
    .span_item:hover .span_icon {
        display: inline;
    }

    .span_icon {
        margin-left: 10px;
        display: none;
    }
</style>